<template>
<table
    class="water-cp-container"
    border="1">
    <tr class="top-container">
        <td class="left">
            地层水条件保存判识 基础数据
        </td>
        <td class="right">
            当前报告
        </td>
    </tr>
    <tr class="content-container">
        <td class="left">
            <div class="container">
                <div class="chart">
                    <MyChart
                        ref="MyChart">
                    </MyChart>
                </div>
            </div>
        </td>
        <td class="right">
            <div class="chart">
                <MyChart
                    ref="MyChart1">
                </MyChart>
            </div>
        </td>
    </tr>
    <tr class="bottom-container" v-if="false">
        <td
            colspan="2"
            class="container">
            低熟油型气
        </td>
    </tr>
</table>
</template>
<script>
/*
 地层水条件保存判识展示页面
 */
import {randomColor} from "@/common/ColorTools";
import {computedRem} from "@/common/OtherTools";
import MyChart from '@/components/MyChart';
export default {
    components:{MyChart},
    props:{
        reports:{  //当前选择的报告列表
            type:Array,
            default:()=>[],
        },
        areas:{  //当前选择的井号
            type:Array,
            default:()=>[],
        },
        horizons:{  //当前选择的层位
            type:Array,
            default:()=>[],
        },
        fontColor:{
            type:String,
            default:'',
        },
        borderColor:{
            type:String,
            default:'',
        },
        chartBorderColor:{
            type:String,
            default:'',
        },
    },
    data() {
        this.colorMap = {};  //颜色列表(保持颜色一致)
        return {};
    },
    watch:{
        reports:{
            handler(){
                this.$nextTick(()=>{
                    this.getReportData();
                    this.getBaseData();
                });
            },
            immediate:true,
        },
    },
    mounted(){
        // this.getBaseData();
    },
    methods:{
        randomColor,
        getBaseData(){  //获取基础数据
            let target = this.$refs.MyChart;
            if(this.reports.length == 0){
                this.drawChart({target,data:[]});
                return;
            }
            this.$Service.post(
                this.$Api.waterSave,
                {
                    "isbasic":1,
                    "type":1,
                    'area':this.areas.join(','),
                    'horizon':this.horizons.join(','),
                },
            ).then(data => {
                let target = this.$refs.MyChart;
                this.drawChart({target,data:data.data});
            }).catch(() => {
                return;
            });
        },
        getReportData(){  //获取报告数据
            let target = this.$refs.MyChart1;
            if(this.reports.length == 0){
                this.drawChart({target,data:[]});
                return;
            }
            this.$Service.post(
                this.$Api.waterSave,
                {
                    "reportType":1,
                    "reportNo":this.reports.map(item=>item.reportNo).join(","),
                    "contenid":this.reports.map(item=>item.contenid).join(","),
                    'area':this.areas.join(','),
                    'horizon':this.horizons.join(','),
                    "type":1,
                },
            ).then(data => {
                this.drawChart({target,data:data.data});
            }).catch(() => {
                this.drawChart({target,data:[]});
                return;
            });
        },
        drawChart({target,data=[]}){  //绘制表格
            let rem = computedRem();
            let color = this.fontColor;
            const oldData = {};  //记录原数据
            const data_ = data;
            data = JSON.parse(JSON.stringify(data));
            data_.forEach((item,index)=>{
                let symbol  = Symbol();
                oldData[symbol] = item;
                data[index].symbol = symbol;
            });
            let indexNumber = 0;  //判断雷达图坐标轴位置
            target.setOption({
                textStyle:{
                    fontSize:rem*1.5,
                    color:color
                },
                legend: {
                    show:true,
                    type: 'scroll',
                    bottom:'bottom',
                    textStyle: {
                        color: color,  // 图例文字颜色
                        fontSize:rem*1,
                    },
                },
                grid: {
                    left: '10%',
                    right: '5%',
                    top: '15%',
                    bottom:'20%',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: params=>{
                        if(!params.data) return;
                        let data = oldData[params.data.symbol_];
                        return `
                            ${data.horizon}<br/>
                            钠氯系数:${data.nacl || 0}<br/>
                            氯镁系数:${data.clmg || 0}<br/>
                            镁钙系数:${data.mgca || 0}<br/>
                            碳酸盐平衡系数:${data.hco3co3ca || 0}<br/>
                            脱硫系数:${data.so4cl || 0}<br/>
                        `
                    },
                },
                radar: {
                    nameGap:30,
                    splitNumber:5,  //指示器分割段数
                    axisLine:{
                        show:true,
                    },
                    axisTick:{
                        show:true,
                    },
                    axisLabel:{
                        show:true,
                        formatter: function (value,index) {
                            if(index==0) indexNumber ++;
                            if(indexNumber%5 == 2) return 75 - value;
                            return value;
                        }
                    },
                    splitLine:{
                        show:true,
                    },
                    splitArea:{
                        show:true,
                    },
                    indicator: [
                        { name: '钠氯系数', max: 2 },
                        { name: '氯镁系数', max: 75},
                        { name: '镁钙系数', max: 1},
                        { name: '碳酸盐平衡系数', max: 0.5 },
                        { name: '脱硫系数', max: 2.5 },
                    ]
                },
                series: [
                    {
                        type: 'radar',
                        data: data.map(item=>{
                            let values = [item.nacl,item.clmg,item.mgca,item.hco3co3ca,item.so4cl];
                            values = values.map((item,index)=>{  //数据过滤
                                if (item<=0) return 0;
                                switch(index){
                                    case 0:
                                        if(item>2) return 2.2;
                                        break;
                                    case 1:
                                        if(item>75) return 76;
                                        break;
                                    case 2:
                                        if(item>1) return 1.1;
                                        break;
                                    case 3:
                                        if(item>0.5) return 0.55;
                                        break;
                                    case 4:
                                        if(item>2.5) return 2.6;
                                        break;
                                }
                                return item;
                            });
                            values[1] = 75 - values[1];
                            return {
                                name:item.horizon,
                                symbol_:item.symbol,
                                value: values,
                            };
                        }),
                    },
                ]
            });
        },
    },
};
</script>
<style scoped lang="scss">
.water-cp-container{
    width: 100%;
    height: fit-content;
    text-align: left;
    color: var(--font-color);
    box-sizing: border-box;
    border-collapse: collapse;
    border-color: var(--border-color);
    border: 1px solid var(--border-color);
    table-layout:fixed;
    >tr{
        >td{
            &:last-child{
                width: 50%;
            }
        }
    }
    >.top-container{
        >td{
            font-size: 1.5rem;
            font-weight: bold;
            padding: 1rem;
            box-sizing: border-box;
            line-height: 1;
            box-sizing: border-box;
        }
    }
    >.content-container{
        >.left{
            >.container{
                >.chart{
                    width: 100%;
                    height: 40rem;
                }
            }
        }
        >.right{
            >.chart{
                width: 100%;
                height: 40rem;
            }
        }
    }
    >.bottom-container{
        >.container{
            padding: 1.5rem 1rem;
            font-size: 1.5rem;
            color: #99a9bf;
            box-sizing: border-box;
            span{
                font-size: 1.7rem;
                color: var(--font-color);
            }
            .data{
                font-size: 2rem;
                color: #00c57a;
                font-weight: bold;
            }
        }
    }
}
</style>
